<template>
	<view class="content">
		<view class="scrollView">
			<scroll-view scroll-y style="height: 100%;" @scrolltolower="lower" :show-scrollbar="false">
				<view class="scrollViewItem" v-for="(item,index) in newsListData" :key="index"
					@click="urlNewsDetail(item)">
					<view class="content">
						<view class="left">
							<image style="" src="../../static/order-on.png" mode=""></image>
						</view>
						<view class="right" style="">
							<view class="radio">
								<text class="title">{{item.Title}}</text>
								<text class="date">{{item.CreateTime?item.CreateTime.substring(0,10):''}}</text>
							</view>
							<view class="radio">
								<view class="textOverflow" style="">{{item.Sketch}}</view>
								<view v-if="item.userid===''" class="position"></view>
							</view>
						</view>
					</view>
				</view>

				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 100rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="newsListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				queryParmas: {
					PageIndex: 1,
					PageRows: 10,
					// 根据时间的倒叙
					SortField: "CreateTime",
					// SortType: "desc",
					Search: {
						UserId: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').Id : ""
					}
				},
				// 总条数
				Total: 0,
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				isActive: 0,
				// 默认显示的区块下标
				index: 0,
				// 默认显示的区块
				currentindex: 0,
				// 已读  未读数据
				category: [{
						id: 1,
						name: '已读',
					},
					{
						id: 2,
						name: '未读',
					},
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
				// 消息通知列表  
				newsListData: [],
			}
		},
		watch: {
			// swiper与上面选项卡联动
			currentindex(newval) {
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.status = "loading"
			this.newsListData = []
			this.queryParmas.PageIndex = 1
			// 重新获取消息通知记录
			this.GetUnreadMessage()
			uni.stopPullDownRefresh(); //停止刷新
		},
		mounted() {
			var that = this;
			//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
				success: function(res) {
					that.fullHeight = "height:" + res.windowHeight + "px";
				}
			});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()


		},
		onShow() {
			this.status = "loading"
			this.newsListData = []
			// 获取消息列表
			this.GetUnreadMessage()
		},
		methods: {
			// 跳转消息详情
			urlNewsDetail(item) {
				console.log('跳转详情', item)
				uni.navigateTo({
					url: '/pages/newsDetail/newsDetail?data=' + JSON.stringify(item)
				})
			},
			// 触底加载
			lower() {
				if (this.newsListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.queryParmas.PageIndex += 1
				this.$http('post', '/Base/Base_Message/GetUnreadMessage', this.queryParmas).then(res => {
					if (res.Success) {
						console.log('获取消息列表', res)
						this.Total = res.Total
						let lists = res.Data
						this.newsListData = this.newsListData.concat(lists)

					} else this.$api.msg(res.Msg)
				})
			},

			// 获取消息列表接口
			GetUnreadMessage() {
				this.status = "loading"
				this.$http('post', '/Base/Base_Message/GetUnreadMessage', this.queryParmas).then(res => {
					if (res.Success) {
						console.log('获取消息列表', res)
						this.Total = res.Total
						let lists = res.Data
						if (lists.length == 0) {
							this.status = "noMore"
							return
						}
						this.newsListData = res.Data
						if (this.queryParmas.PageRows * this.queryParmas.PageIndex >= this.Total) {
							this.contentText.contentnomore = "没有更多了"
							// 暂停加载  没有更多了
							this.status = "noMore"
							return
						}

					} else {
						// 暂停加载  没有更多了
						this.status = "noMore"
						this.$api.msg(res.Msg)
					}
				})
			},

			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				// const query = uni.createSelectorQuery().in(this);
				// query.select('.tab-scroll').boundingClientRect(data => {
				// 	// 拿到 scroll-view 组件宽度
				// 	this.contentScrollW = data.width
				// }).exec();
				// query.selectAll('.tab-scroll_item').boundingClientRect(data => {
				// 	let dataLen = data.length;
				// 	for (let i = 0; i < dataLen; i++) {
				// 		//  scroll-view 子元素组件距离左边栏的距离
				// 		this.category[i].left = data[i].left;
				// 		//  scroll-view 子元素组件宽度
				// 		this.category[i].width = data[i].width
				// 	}
				// }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e) {
				const {
					current
				} = e.detail;
				this.currentindex = current;
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		display: flex;
		background-color: #FFFFFF;
	}

	.content {
		width: 100%;
		height: 100%;
		.scrollView {
			// 兼容H5和APP
			/* #ifdef H5 */
			height: calc(100vh - 100px);
			/* #endif */
			/* #ifdef APP */
			height: calc(100vh - 50px);
			/* #endif */
		}

		.scrollViewItem {
			padding: 25rpx;
			border-radius: 10rpx;
			// box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4), -7px -7px 12px rgba(255, 255, 255, 0.9);
			// margin: 25rpx;
			
			.content{
				display: flex;
				.left{
					image{
						width:100rpx;
						height: 100rpx;
					}
				}
				.right {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-bottom: 1px solid #eee;
					.radio {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.textOverflow {
							color: #999;
							overflow: hidden; 
							text-overflow: ellipsis; 
							white-space: nowrap;  
							-webkit-line-clamp: 1; //行数需设置
							line-clamp: 1;
							width: 450rpx;
						}
					
						.position {
							width: 15rpx;
							height: 15rpx;
							background-color: red;
							border-radius: 50%;
						}
						.title{
							color: #333;
							overflow: hidden; 
							text-overflow: ellipsis; 
							white-space: nowrap;  
							-webkit-line-clamp: 1; //行数需设置
							line-clamp: 1;
							width: 440rpx;
							font-size: 18px;
						}
						.date{
							font-size: 12px;
							color:#999;
						}
					}
				}
				
			}

		}

	}



	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	::v-deep.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>